$(function () {
  let layer = layui.layer
  let form = layui.form
  let laypage = layui.laypage;
  // 定义一个查询的参数对象，将来请求数据的时候
  // 需要将请求参数对象提交到服务器
  let query = {
    pagenum: 1, //页码值，默认请求第一页的数据
    pagesize: 2, // 每页显示几条数据，默认每页显示2条
    cate_id: '', // 文章分类的 Id
    state: '' // 文章的发布状态
  }

  initart_list()
  initart_cate()

  // 获取文章列表的数据
  function initart_list() {
    $.ajax({
      method: 'GET',
      url: '/my/article/list',
      data: query,
      success: function (res) {
        if (res.status !== 0) {
          return layer.msg("获取文章列表失败！")
        }
        let htmlStr = template("tpl-table", res)
        $('tbody').html(htmlStr)
        // 调用渲染分页方法
        renderPage(res.total)
      }
    })
  }

  // 定义没花时间的过滤器
  template.defaults.imports.dateFormat = function (date) {
    const dt = new Date(date)
    let y = dt.getFullYear()
    let m = padZero(dt.getMonth() + 1)
    let d = padZero(dt.getDate())

    let hh = padZero(dt.getHours())
    let mm = padZero(dt.getMinutes())
    let ss = padZero(dt.getSeconds())
    return y + '-' + m + '-' + d + ' ' + hh + ':' + mm + ':' + ss
  }

  // 定义补零函数
  function padZero(n) {
    return n > 9 ? n : '0' + n
  }

  // 获取文章列表的分类
  function initart_cate() {
    $.ajax({
      method: 'GET',
      url: "/my/article/cates",
      success: function (res) {
        if (res.status !== 0) {
          return layer.msg('获取文章分类失败')
        }
        let htmlStr = template("tpl-cate", res)
        $("#art_cate").html(htmlStr)
        // 通过 layui 重新渲染表单区域的UI结构
        form.render()
      }
    })
  }

  // 筛选表单的提交事件
  $("#filter_form").on("submit", function (e) {
    e.preventDefault();
    // 获取表单中的数据
    let cate_id = $("[name=art_cate]").val();
    let state = $("[name=art_state]").val();
    // 为查询参数中 query 更新数据
    query.cate_id = cate_id
    query.state = state
    initart_list()
  })

  // 渲染分页方法
  function renderPage(total) {
    // 调用 laypage.render()方法来渲染分页的结构
    laypage.render({
      elem: 'pageBox', //注意，这里的是 ID，不用加 # 号
      count: total, //数据总数，从服务端得到
      limit: query.pagesize,  // 每页显示几条数据
      curr: query.pagenum, // 设置默认被选中的分页
      layout:['count','limit','prev','page','next','skip'],
      limits:[2,3,5,10],
      // 分页发生切换的时候，触发 jump 回调
      // 触发 jump 回调的方式有两种
      // 1.点击页码的时候，会触发 jump 回调
      // 2.只要调用了 laypage.render()方法，就会触发 jump 回调
      jump: function (obj, first) {
        // 可以通过 first的值，来判断是通过那种方式，触发的 jump回调
        // 如果 first 的值为 true，证明是方式2触发的
        // 否则就是方式1触发的
        // 把最新的页码值赋值到 query 这查询参数中
        query.pagenum = obj.curr
        // 把最新的条目数，赋值到 query 这个查询参数对象的 pagesize 属性中
        query.pagesize = obj.limit
        if (!first) {
          //do something
          initart_list()
        }
      }
    });
  }

  // 通过代理的形式，为删除按钮添加点击事件
  $("tbody").on("click",".btn_delet",function(){
    // 获取删除按钮的个数
    let len = $('.btn_delet').length
    console.log(len);
    // 获取文章的id
    let id = $(this).attr("data-id")
    let index = layer.confirm('确认删除?', {icon: 3, title:'提示'}, function(index){
      // 发起 ajax请求
      $.ajax({
        method:'GET',
        url:'/my/article/delete/'+id,
        success:function(res){
          if(res.status!==0){
            return layer.msg("删除文章失败！")
          }
          layer.msg("删除文章成功！")
          // 当数据删除完成后，需要判断当前这一页中，是否还有剩余的数据
          // 如果没有剩余的数据了，则让页码值 -1 之后，
          // 在重新调用 initart_list 方法

          if(len===1){
            // 如果 len 的 值等于1，证明删除完毕之后，页面上就没有任何数据了
            query.pagenum = query.pagenum===1?1:query.pagenum-1
          }
          initart_list()
        }
      })
      layer.close(index);
    });
  })
})